background-color is the color behind an element's content and padding.

UI design fundamentals

White space

• padding and margin help create white space around and between elements, improving readability and visual hierarchy.
• em refers to the font size of the element, allowing for scalable spacing.
• rem refers to the root element's font size, providing consistent spacing across the document.
• vh and vw are relative units based on the viewport height and width, respectively, useful for responsive designs.

Alignment

• border-left, border-right, border-top, and border-bottom can be used to create visual separation between elements.
• border-left can be used to check if an element is aligned with another element.
• text-align can be used to align text within an element.

Contrast

• WCAG2.0 recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
• WCGA2.0 AAA level requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
• Use tools like contrast ratio checker to ensure compliance with accessibility standards.

Scale

• Use em and rem for scalable typography and spacing.
• Use vh and vw for responsive designs that adapt to different screen sizes.
• Use grid and flexbox layouts to create scalable and flexible designs. Occupy available space without fixed dimensions.
• Increase the scale / relative comparison / highlight / constrast for important elements to draw attention.

Typography

• Font choices should be legible and appropriate for the content.
• Visual hierarchy can be established through font size, weight, and style.
• Font size should be responsive, using rem or em units for scalability.
• Alignment and spacing should be consistent to improve readability.
• Letter spacing and line height should be adjusted for optimal readability.
• Font styles should be used to create emphasis and contrast, such as bold or italic.
• Color contrast should be considered for accessibility, ensuring text is readable against its background.

Color

• Use a limited color palette to create a cohesive design.
• Use color to create visual hierarchy and emphasis.
• Consider color blindness and ensure sufficient contrast between text and background.
• Use tools like color contrast checker to ensure compliance with accessibility standards.
• Use CSS variables for consistent color management across the design.
• Use rgba for colors with transparency to create depth and layering effects.
• Use hsl for more intuitive color manipulation, allowing for easier adjustments to hue, saturation, and lightness.

Visual hierarchy

• Increase the scale / relative comparison / highlight / constrast for important elements to draw attention.

Flexbox

Flexbox is a layout model that allows for responsive and flexible designs. It provides an efficient way to align and distribute space among items in a container, even when their size is unknown or dynamic.

Live Demo: Spacing

• space-between separates items with equal space between them, no padding in the beginning and end.
• space-around separates items with equal space around them, but the first and last items are flush with the edges of the container.
• space-evenly separates items with equal space around them.

TODO: fix the live demo to work with the radio buttons

Flexbox properties

• display: flex; - Defines a flex container and enables flexbox layout.
• flex-direction - Defines the direction of the flex items (row, column, row-reverse, column-reverse).
• flex-wrap - Controls whether flex items should wrap onto multiple lines or stay on a single line.
• justify-content - Aligns flex items along the main axis (start, end, center, space-between, space-around).
• align-items - Aligns flex items along the cross axis (start, end, center, baseline, stretch).
• align-content - Aligns flex lines within the flex container when there is extra space (start, end, center, space-between, space-around, stretch).
• flex-grow - Defines how much a flex item should grow relative to the rest of the flex items.
• flex-shrink - Defines how much a flex item should shrink relative to the rest of the flex items.
• flex-basis - Defines the initial size of a flex item before it grows or shrinks.
• flex - A shorthand property for flex-grow, flex-shrink, and flex-basis. Set to 1 to allow the item to grow and shrink as needed.
• align-self - Allows the default alignment (or the one specified by align-items) to be overridden for individual flex items.

Flex grow and shrink

• flex-grow allows a flex item to grow and occupy available space in the container.
• flex-shrink allows a flex item to shrink when there is not enough space in the container.
• Both properties can be set to 0 to prevent growing or shrinking, or set to a positive integer to allow growing or shrinking relative to other items.
• flex-basis defines the initial size of a flex item before it grows or shrinks. It is important to set this property to ensure that flex items have a defined size before the flexbox algorithm applies growth or shrinkage.

.f1 {
    flex-grow: 1; /* Allows the item to grow */
    flex-shrink: 2; /* This will shrink twice as much as f2 */
    flex-basis: 100px; /* Sets the initial size of the item */
}

.f2 {
    flex-grow: 2; /* Allows the item to grow twice as much as f1 */
    flex-shrink: 1; /* Allows the item to shrink */
    flex-basis: 100px; /* Sets the initial size of the item */
}

.f3 {
    flex-grow: 3; /* Prevents the item from growing */
    flex-shrink: 0; /* Prevents the item from shrinking */
    flex-basis: 100px; /* Sets the initial size of the item */
}

Order

• The order property allows you to change the visual order of flex items without changing their source order in the HTML.
• By default, all flex items have an order of 0. Items with a lower order value will appear before items with a higher order value.
• This can be useful for creating responsive designs where the visual order of items needs to change based on screen size or layout.

.item {
    order: 1; /* Default order is 0, so this item will appear after items with order 0 */
}
.item.special {
    order: -1; /* This item will appear before items with order 0 */
}

TOCHECK: - media queries - flex wrap

TODO: Add a live demo for the flex shrink and grow